<template>
    <div>
        <a-tabs
            centered
            v-model:activeKey="activeKey"
            tab-position="top"
            :style="{ height: '80px' }"
            >
            <a-tab-pane key='1' tab="效果">
                <div class="contrain">
                <div class="layer1"></div>
                <div class="layer2"></div>
                <div class="layer3"></div>
                <div class="layer4"></div>
                <div class="layer5"></div>
                <div class="title">Scss 星空</div>
                </div>
            </a-tab-pane>
            <a-tab-pane key='2' tab="编码">
                <MyCodemirror :code="codeBlock"/>
                <!-- <div class="code-contrain">
                    <pre><code>
                    {{ codeBlock }}
                    </code></pre>
                </div>     -->
            </a-tab-pane>
        </a-tabs>

        <!-- <div class="contrain">
            <div class="layer1"></div>
            <div class="layer2"></div>
            <div class="layer3"></div>
            <div class="layer4"></div>
            <div class="layer5"></div>
            <div class="title">Scss 星空</div>
            <div>
                代码块
                <pre><code>
                {{ codeBlock }}
                </code></pre>
            </div>
        </div> -->
    </div>
</template>
<script setup>
import MyCodemirror from "@/pages/basic/codemirror/index.vue"
import { ref } from 'vue';
const activeKey = ref('1')
const codeBlock = ref(`
<template>
    <div class="contrain">
        <div class="layer1"></div>
        <div class="layer2"></div>
        <div class="layer3"></div>
        <div class="layer4"></div>
        <div class="layer5"></div>
        <div class="title">Scss 星空</div>
    </div>
</template>
<style scoped lang = "scss">
.contrain{
    background: #000;
    height: 100vh;
    width: 100%;
}
.title {
    background: linear-gradient(to bottom, #333, #666);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 80px;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@function getShadows($n){
    $shadows: '#{random(100)}vw #{random(100)}vh #fff';
    @for $i from 2 through $n {
        $shadows: '#{$shadows}, #{random(100)}vw #{random(100)}vh #fff'
    }
    @return unquote($shadows)
}
$duration: 200s;
$count: 1000;
@for $i from 1 through 5 {
    $duration: $duration / 2;
    $count: floor($count / 2);
    .layer#{$i} {
        $size: #{$i}px;
        position: fixed;
        width: $size;
        height: $size;
        border-radius: 50%;
        left: 0;
        top: 0;
        background: #fff;
        box-shadow: getShadows($count);
        animation: moveUp $duration linear infinite;
        &::after{
            content: "";
            position: fixed;
            width: inherit;
            height: inherit;
            border-radius: inherit;
            left: 0;
            top: 100vh;
            box-shadow: inherit;
        }
    }
}
@keyframes moveUp {
    to{
        transform: translateY(-100vh);
    }
}
</style>
`)

</script>
<style scoped lang = "scss">
.contrain{
    background: #000;
    height: calc(100vh - 80px);
    width: 100%;
}
.code-contrain {
    height: calc(100vh - 80px);
    overflow: scroll;
    background: #000;
    color: #fff
}
.title {
    background: linear-gradient(to bottom, #333, #666);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 80px;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@function getShadows($n){
    $shadows: '#{random(100)}vw #{random(100)}vh #fff';
    @for $i from 2 through $n {
        $shadows: '#{$shadows}, #{random(100)}vw #{random(100)}vh #fff'
    }
    @return unquote($shadows)
}
$duration: 200s;
$count: 1000;
@for $i from 1 through 5 {
    $duration: $duration / 2;
    $count: floor($count / 2);
    .layer#{$i} {
        $size: #{$i}px;
        position: fixed;
        width: $size;
        height: $size;
        border-radius: 50%;
        left: 0;
        top: 0;
        background: #fff;
        box-shadow: getShadows($count);
        animation: moveUp $duration linear infinite;
        &::after{
            content: "";
            position: fixed;
            width: inherit;
            height: inherit;
            border-radius: inherit;
            left: 0;
            top: 100vh;
            box-shadow: inherit;
        }
    }
}
@keyframes moveUp {
    to{
        transform: translateY(-100vh);
    }
}
</style>
